<template>
  <div v-if="hero">
    <p>id:{{hero.id}} <label>name:<input v-model="hero.name" v-on:keyup.enter="onSubmit"/></label></p>
  </div>
</template>

<script>
  export default {
    props: ['heroes'],
    data() {
      return {
        hero: null
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
        this.heroes.push(this.hero);
        this.initHero();
      },
      initHero() {
        this.hero = {id: Math.floor(Math.random() * 100), name: null}
      }
    },
    created(){
      this.initHero();
    }
  }
</script>

<style scoped>

</style>
